import dayjs from "dayjs";
import { queryProductList } from "@src/api/booking";
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import base from "@src/store/base";
import router from "@src/router";

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: [{
    store: base,
    fields: ['themeColor', 'themeTitleColor'],
  }],
  options: {
    addGlobalClass: true
  },
  properties: {
    shopId: { type: Number },
    tags: Object
  },
  data: {
    beginDay: null,
    endDay: null,
    days: 0,
    productType: 0,
    productList: [],
    filterList: [],
    tagIdList: [],
    tagList: [],
    hasInit: false,
  },
  observers: {
    shopId: function (shopId) {
      if (shopId && this.data.hasInit) {
        this.setData({ tagIdList: [] })
        this.fetchData();
      }
    },
    'tagIdList,tags': function (tagIdList, tags) {
      let tagList = []
      if (tagIdList.length !== 0 && tags) {
        tagIdList.forEach(item => {
          if (tags.map[item]) {
            tagList.push({ id: item, title: tags.map[item] });
          }
        })
      }
      // console.log('tagList', tagList)
      this.setData({ tagList })
    }
  },
  lifetimes: {
    attached: function () {
      let beginDay = new Date();
      let endDay = dayjs(new Date()).add(1, 'day');
      this.parseDays(beginDay, endDay);
      this.fetchData();
      this.setData({ hasInit: true })
    }
  },
  methods: {
    parseDays(beginDay, endDay) {
      let weeks = ['日', '一', '二', '三', '四', '五', '六']
      beginDay = dayjs(beginDay)
      endDay = dayjs(endDay)
      let days = endDay.diff(beginDay, 'day')
      this.setData({
        days: days,
        beginDay: {
          text: beginDay.format("YYYY-MM-DD"),
          month: beginDay.format("MM"),
          day: beginDay.format("DD"),
          week: weeks[beginDay.day()],
        },
        endDay: {
          text: endDay.format("YYYY-MM-DD"),
          month: endDay.format("MM"),
          day: endDay.format("DD"),
          week: weeks[endDay.day()],
        }
      })
    },
    fetchData() {
      let data = {
        beginDay: this.data.beginDay.text,
        endDay: this.data.endDay.text,
        shopId: this.data.shopId,
        productType: this.data.productType
      };
      queryProductList(data).then(res => {
        if (res.code === 0) { this.parseData(res.data) }
      })
    },
    parseData(productList) {
      let tagIdList = [];
      for (let product of productList) {
        let tags = [];
        if (product.tags) {
          tags = product.tags.split(",");
          tags.forEach(item => {
            tagIdList.push(item)
          })
        }
        product['tags'] = tags;
      }
      console.log("productList", productList);
      // console.log("tagIdList", tagIdList)
      this.setData({ productList: productList, filterList: productList, tagIdList });
      this.deleteTags()
    },
    //删除无用标签
    deleteTags() {
      let filterList = this.data.filterList;
      let tagList = this.data.tagList;
      if (!(filterList.length > 0)) { return; }
      let arr = [];
      tagList.forEach(item => {
        arr.push(item.id)
      })
      let newData = filterList.map((item) => {
        let oldTags = item.tags;
        let newTags = [];
        oldTags.forEach((tag) => {
          if (arr.includes(tag)) {
            newTags.push(tag);
          }
        });
        return { ...item, ...{ tags: newTags } };
      });
      this.setData({ filterList: newData })
    },
    handleFilterTags(e) {
      let tagList = e.detail;
      let productList = this.data.productList;
      let filterList = [];
      if (!tagList || tagList.length === 0) {
        this.setData({ filterList: productList })
        return;
      }
      for (let product of productList) {
        if (this.includeTag(product, tagList)) {
          filterList.push(product);
        }
      }
      this.setData({ filterList })
    },
    includeTag(product, tags) {
      if (!product.tags) {
        return false;
      }
      for (let tag of tags) {
        if (product.tags.indexOf(String(tag)) === -1) {
          return false;
        }
      }
      return true;
    },
    handleBooking(e) {
      router.push({
        name: 'booking/submitBooking',
        params: {
          productNo: e.currentTarget.dataset.no,
          productType: this.data.productType,
          beginDay: this.data.beginDay.text,
          endDay: this.data.endDay.text
        },
      })
    },
    handleProductDetail(e) {
      router.push({
        name: 'booking/roomDetail',
        params: {
          productNo: e.currentTarget.dataset.no,
          beginDay: this.data.beginDay.text,
          endDay: this.data.endDay.text
        },
      })
    },
    handleToSelectTime() {
      router.push({
        name: 'booking/calenderPicker',
        params: {
          beginDay: this.data.beginDay.text,
          endDay: this.data.endDay.text
        },
        events: {
          'selectDay': (data) => {
            let beginDay = dayjs(data.beginDay, 'YYYY-MM-DD')
            let endDay = dayjs(data.endDay, 'YYYY-MM-DD')
            this.parseDays(beginDay, endDay);
            this.fetchData();
          }
        }
      })
    }
  },
})
